﻿/// <reference name="MicrosoftAjax.js"/>
/// <reference name="Doo.WebUI.core.js"/>
/// <reference name="Doo.WebUI.DataView.script.js"/>

Type.registerNamespace("Doo.PageBuilder.PropertyEditor");

//提供客户端属性编辑
Doo.PageBuilder.PropertyEditor.EditorBase = function () {
    Doo.PageBuilder.PropertyEditor.EditorBase.initializeBase(this);
    this.init();
}

Doo.PageBuilder.PropertyEditor.EditorBase.prototype = {
    template: { 'root': "<div>{#value}</div>" },
    templatebinder: null,
    init: function () {
        this.templatebinder = new Doo.TemplateBinder();
        this.templatebinder.tpls = this.template;
    },

    _element: null,

    _value: null,

    set_value: function (value) { this._value = value; },

    get_value: function () { return this._value; },

    set_option: function (option) { },

    render: function (writer) {
        var data = { value: this._value };
        writer.append(this.templatebinder.bind(data));
    },

    ondomcreated: function (element) { this._element = element;  }
}

Doo.PageBuilder.PropertyEditor.EditorBase.registerClass('Doo.PageBuilder.PropertyEditor.EditorBase');

//StringEditor
Doo.PageBuilder.PropertyEditor.StringEditor = function () {
    Doo.PageBuilder.PropertyEditor.StringEditor.initializeBase(this);
    this.init();
}

Doo.PageBuilder.PropertyEditor.StringEditor.prototype = {
    init: function () { Doo.PageBuilder.PropertyEditor.StringEditor.callBaseMethod(this, 'init'); },
    template: { 'root': "<input type='text' value='{#value}' />" },
    get_value: function () { var txt = this._element.firstChild.value;return txt; }
}

Doo.PageBuilder.PropertyEditor.StringEditor.registerClass('Doo.PageBuilder.PropertyEditor.StringEditor', Doo.PageBuilder.PropertyEditor.EditorBase);


//DropDownEditor
//用于下拉编辑，需要一个数据提供者
//EnumEditor
Doo.PageBuilder.PropertyEditor.DropDownEditor = function () {
    Doo.PageBuilder.PropertyEditor.DropDownEditor.initializeBase(this);
    this.init();
}

Doo.PageBuilder.PropertyEditor.DropDownEditor.prototype = {
    init: function () { Doo.PageBuilder.PropertyEditor.DropDownEditor.callBaseMethod(this, 'init'); },
    template: {
        'root': '<select>{[option]#items}</select>',
        'option': '<option value="{#v}"{#s}>{#k}</option>'
    },
    dropdata: {},
    set_option: function (option) {
        if (!option) return;
        if (option.data) {
            //从服务器获取
            this.dropdata = option.data;
        }
    },
    render: function (writer) {//重载render方法
        //处理数据
        var items = new Array();
        for (var key in this.dropdata) {
            var item = { k: key, v: this.dropdata[key] };
            if (this._value == item.v) item['s'] = ' selected="selected"';
            else item['s'] = '';
            items.push(item);
        }
        var data = { 'items': items };
        writer.append(this.templatebinder.bind(data));
    }
}

Doo.PageBuilder.PropertyEditor.DropDownEditor.registerClass('Doo.PageBuilder.PropertyEditor.DropDownEditor', Doo.PageBuilder.PropertyEditor.EditorBase);

//EnumEditor
Doo.PageBuilder.PropertyEditor.EnumEditor = function () {
    Doo.PageBuilder.PropertyEditor.EnumEditor.initializeBase(this);
    this.init();
}

Doo.PageBuilder.PropertyEditor.EnumEditor.prototype = {
    init: function () { Doo.PageBuilder.PropertyEditor.EnumEditor.callBaseMethod(this, 'init'); },
    dropdata: { a: 1, b: 2, c: 3 }, //object,enum的键值对
}

Doo.PageBuilder.PropertyEditor.EnumEditor.registerClass('Doo.PageBuilder.PropertyEditor.EnumEditor', Doo.PageBuilder.PropertyEditor.DropDownEditor);

//EditorPanel
Doo.PageBuilder.EditorPanel = function (element) {
    this.templatebinder = new Doo.TemplateBinder(this);
    this.templatebinder.tpls = this.tpls;
    Doo.PageBuilder.EditorPanel.initializeBase(this, [element]);
}
Doo.PageBuilder.EditorPanel.saveConfig=function(btn){
    var table=btn.parentNode.offsetParent;
    var ep = table.editorpanel;
    var props= ep.getProperties(table);
    
}
Doo.PageBuilder.EditorPanel.showConfig=function(type,link){
    var ep=$get(type).control;
    var WP=link.getAttribute('WP');
    var props={};
    if (WP) props=eval("("+WP+")");
    var ph= document.createElement("div");
    document.body.appendChild(ph);
    var location=Sys.UI.DomElement.getLocation(link);
    ph.style.backgroundColor="white";
    ph.style.border="solid 1px black";
    ph.style.position="absolute";
    ph.style.left=location.x;
    ph.style.top=location.y;
    ep.show(ph,props);
}
Doo.PageBuilder.EditorPanel.prototype = {
    properties: null,
    get_properties: function () { return this.properties; },
    set_properties: function (value) { this.properties = value; },
    templatebinder: null,
    tpls: {
        'root': '<table>{[editoritem]#props}<tr><td colspan="2"><button type="button" onclick="Doo.PageBuilder.EditorPanel.saveConfig(this);">保存</button></td></tr></table>',
        'editoritem': ' <tr><td><span>{#title}</span><a title="当前值类型：{%DataItem["t"]==1?"直接":"表达式"}"></a></td><td pt="{#pt}" type="{#t}" field="{#f}">{#html}</td></tr>'
    },

    show: function (placeholder, values) {
        var data = new Array();
        var ps = this.properties; 
        var editors = new Array();
        for (var i = 0; i < ps.length; i++) {
            var item = ps[i];
            var f = item.field;
            var title=item.title;
            var v = values[f];
            var pt = item.type;
            //开始生成编辑器
            var etclass = pt ? eval(pt) : Doo.PageBuilder.PropertyEditor.StringEditor;
            var etitem = new etclass();
            editors.push(etitem);
            //设置选项
            etitem.set_option(item.option);
            //设置值
            etitem.set_value(v);
            var sb = new Sys.StringBuilder();
            etitem.render(sb);
            data.push({f: f,title:title, t: 1, pt: pt, v: v, html: sb.toString() });
        }
        var html = this.templatebinder.bind({ props: data });
        placeholder.innerHTML = html;
        //render complete
        var table = placeholder.firstChild;
        table.editorpanel=this;
        for (var i = 0; i < editors.length; i++) {
            var row = table.rows[i];
            var cell = row.cells[1];
            editors[i].ondomcreated(cell);
            cell.editor = editors[i]; //赋值
        }
    },
    getProperties: function (table) {
        ///<summary>获取属性集</summary>
        var rows = table.rows;
        var ps = {};
        for (var i = 0; i < rows.length - 1; i++) {
            var c = rows[i].cells[1];
            var f = c.field;
            var t = c.type;
            if (t == 2) {
                ps[f] = this.ExpEditor.getValue(c);
            }
            else {
                var editor=c.editor;
                ps[f] = editor.get_value();
            }
        }
        return ps;
    },
    ExpEditor: {
        getHTML: function (binder, v) {
            //目前只显示值，不允许编辑
            return v;
        },
        getValue: function (parent) {
            return parent.innerHTML;
        }
    }
}
Doo.PageBuilder.EditorPanel.registerClass("Doo.PageBuilder.EditorPanel",Doo.DataViewBase);